<template>
  <el-menu :default-active="activeItem" @select="clickMenuItem" :collapse="isCollapse"
  background-color="white"
  active-text-color="#ffd04b">
    <!--无子菜单-->
    <el-menu-item v-for="item in oneMenu" :key="item.id" :index="String(item.id)">
      <i :class="item.icon"></i>
      <span>{{item.name}}</span>
      </el-menu-item>
    <!--有子菜单-->
    <el-submenu v-for="sub in moreMenu" :key="sub.id" :index="String(sub.id)">
      <template slot="title">
        <i :class="sub.icon"></i>
        <span>{{sub.name}}</span>
      </template>
      <el-menu-item v-for="sub_item in sub.children" :key="sub_item.id" :index="String(sub_item.id)">{{sub_item.name}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  data(){
    return{

    }
  },
  props:{
    isCollapse:Boolean
  },
  mounted() {
    this.getMenu()
    this.clickMenuItem('11')
  },
  methods: {
    ...mapActions({
      getMenu: "getMenu",
      clickMenuItem:  "clickMenuItem"
    })
  },
  computed: {
    ...mapState({
      activeItem: state=>state.menu.activeItem,
    }),
     ...mapGetters({
      oneMenu: "oneMenu",
      moreMenu: "moreMenu",

    })
  }
};
</script>
